<template>
  <div>
    <el-button type="primary" text @click="add"> 增加 </el-button>
    <!-- Form增加 -->
    <el-dialog v-model="dialogFormVisible" title="车型详情">
      <el-form :model="form">
        <el-form-item label="排序" :label-width="formLabelWidth">
          <el-input v-model="form.orders" autocomplete="off" />
        </el-form-item>
        <el-form-item label="图片" :label-width="formLabelWidth">
          <el-upload
            class="avatar-uploader"
            :action="`${api}/index.php/index/Adminapi/aliuploadfile`"
            :data="jm()"
            :show-file-list="false"
            :on-success="
              (file) => {
                editImgsProps({ file, key: 'images' });
              }
            "
            :key="form.images"
          >
            <img
              v-if="form.images"
              :src="HttpImg+form.images"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="路由" :label-width="formLabelWidth">
          <el-input v-model="form.routes" autocomplete="off" />
        </el-form-item>
        <el-form-item label="外链" :label-width="formLabelWidth">
          <el-input v-model="form.alink" autocomplete="off" />
        </el-form-item>
        <el-form-item label="显示/隐藏" :label-width="formLabelWidth">
          <el-switch
            v-model="value"
            @change="changeS"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="postData"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>

    <el-table :data="tableData" style="width: 100%">
      <el-table-column
        fixed
        prop="orders"
        label="排序"
        width="200"
        align="center"
      />
      <el-table-column
        prop="images"
        label="图片"
        width="300"
        align="center"
      >
        <template #default="scope">
          <img
            style="width: 100px; height: 100px"
            :src="HttpImg + scope.row.images"
          />
        </template>
      </el-table-column>
      <el-table-column
        prop="routes"
        label="路由"
        width="350"
        align="center"
      />
      <el-table-column
        prop="alink"
        label="外链"
        width="550"
        align="center"
      />
       <el-table-column
        label="显示/隐藏"
        width="350"
        align="center"
      >
        <template #default="scope">
          <el-switch
            v-model="scope.row.statusN"
            @change="changeLb(scope.row.id)"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" align="center" width="350">
        <template #default="scope">
          <el-button link type="primary" @click="eid(scope.row.id)"
            >修改</el-button
          >
          <el-button link type="danger" @click="del(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import UploadFile from "element-plus";
import { ElMessageBox, ElMessage } from "element-plus";
export default {
  components: {
    [UploadFile.name]: UploadFile,
  },
  data() {
    return {
      HttpImg: "https://ckmco-video.oss-cn-shanghai.aliyuncs.com/",
      tableData: [],
      jxlist: [],
      jxform: [],
      form: [],
      form1: [],
      dialogFormVisible: false,
      dialogFormVisible1: false,
      dialogjx: false,
      formLabelWidth: "120px",
      imageUrl: "",
      options: [
        {
          value: "1",
          label: "赛艇系列",
        },
        {
          value: "2",
          label: "其他系列",
        },
      ],
      value: true,
      id: "",
      hdid: "",
      hdname: "",
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    changeLb(id){
      for(let i in this.tableData){
        if(id==this.tableData[i].id){
          this.form=this.tableData[i];
          this.form.status=this.tableData[i].statusN?1:0;
        }
      }
      this.id=id;
      setTimeout(()=>{
        this.postData();
      },200)
    },
    changeS(){
      this.form.status=this.value?1:0;
    },
    tj(id, name) {
      this.dialogjx = true;
      this.hdid = id;
      this.hdname = name;
      this.getjxlist();
    },
    add() {
      this.form.images = "";
      this.form.alink = "";
      this.form.orders = "";
      this.form.routes = "";
      this.form.status = 1;
      this.dialogFormVisible = true;
      this.id = "";
    },

    del(id) {
      ElMessageBox.confirm("是否确定删除?", "", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http
            .post("/index.php/index/Adminapi/bannerxcxdel", {
              id: id,
            })
            .then((res) => {
              if (res.code == 200) {
                this.getData();
                ElMessage({
                  message: "删除成功",
                  type: "success",
                });
              }
            });
        })
        .catch(() => {});
    },
    eid(id) {
      this.dialogFormVisible = true;
      this.id = id;
      this.$http
        .post("/index.php/index/Adminapi/bannerxcxxq", {
          id: id,
        })
        .then((res) => {
          if (res.code == 200) {
            this.form = res.data[0];
            this.value=this.form.status==1?true:false;
          }
        });
    },
    // updateData() {
    // 	let data1 = {
    // 		id: this.form1.id,
    // 		name: this.form1.name,
    // 		cjzt: this.form1.cjzt,
    // 		kjtime:this.getTimeFormat(this.form1.kjtime),
    // 		images: this.form1.images,
    // 		twlink: this.form1.twlink,
    // 	}
    // 	console.log(data1)
    // 	this.$http.post("/index.php/index/goodses/cjupdate", data1).then(res => {
    // 		if (res.code == 200) {
    // 			this.dialogFormVisible1 = false;
    // 			this.getData()
    // 		 }
    // 	 })
    // },
    getData() {
      this.tableData = [];
      this.$http.post("/index.php/index/Adminapi/bannerxcxlist").then((res) => {
       
        this.tableData = res.data;
        this.tableData.forEach(item=>{
          item.statusN=item.status==1?true:false
        })
      });
    },
    postData() {
      // this.form.cjzt = this.value;
      let data = {
        images: this.form.images,
        alink: this.form.alink,
        orders: this.form.orders,
        routes: this.form.routes,
        status: this.form.status,
        id: this.id,
      };
      this.$http
        .post(
          this.id
            ? "/index.php/index/Adminapi/bannerxcxedit"
            : "/index.php/index/Adminapi/bannerxcxadd",
          data
        )
        .then((res) => {
          if (res.code == 200) {
            this.dialogFormVisible = false;
            
            ElMessage({
              message: this.id ? "编辑成功" : "新增成功",
              type: "success",
            });
            
            this.getData();
          }
        });
    },
    getTimeFormat(zcTime) {
      let time = new Date(zcTime).getTime() / 1000; //除1000 是变成秒级的时间戳 不除就是毫秒级
      return time;
    },
    disabledDateFun(time) {
      return time.getTime() < Date.now() - 8.64e7;
    },
    formatEmployment(type) {
      // 根据源数据经过处理 把处理之后的数据返回
      // 定义一个映射结构
      const map = {
        1: "赛艇系列",
        2: "其他系列",
      };
      return map[type];
    },
    getLocalTime(nS) {
      return new Date(parseInt(nS) * 1000)
        .toLocaleString()
        .replace(/:\d{1,2}$/, " ");
    },
  },
};
</script>
<style scoped>
.el-icon-plus {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
